<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #msg{width:400px;height:200px;border: solid 1px black;}
    </style>
</head>
<body>
    <textarea id="txt1"></textarea>
    <input type="button" id="btn1" value="敏感词过滤">
    <input type="button" id="btn2" value="翻转字符串">
    <input type="button" id="btn3" value="是否是回文字符串">
    <input type="button" id="btn4" value="统计字符出现的次数（控制台）">
    <input type="button" id="btn5" value="是否为空">
    <input type="button" id="btn6" value="是否为数字开头">
    <input type="button" id="btn7" value="长度是否在6到20">
    <div id="msg"></div>
</body>
<script>
    // 1. 敏感词过滤
    //     - 敏感词库自己设定
    var arr = ["abc", "你好", "哈哈", "hello"];
    var txt1 = document.getElementById("txt1")
    var btn1 = document.getElementById("btn1")
    var msg = document.getElementById("msg")

    btn1.onclick = function(){
        var str = txt1.value;
        // 假设整个字符都是敏感词，替换字符长度次
        for(var j=0;j<str.length;j++){
            // 遍历敏感词库
            for(var i=0;i<arr.length;i++){
                // 因为字符的任何方法都不会修改原字符
                // 所以，需要将替换结果手动覆盖原字符
                str = str.replace(arr[i], "***");
            }
        }
        // 打印结果
        msg.innerHTML = str;
    }
    // 终极解决方案：正则
    


    // 2. 翻转字符串
    var btn2 = document.getElementById("btn2")
    btn2.onclick = function(){
        var str = txt1.value;
                // 先换成数组，翻转，再转回字符
        str = str.split("").reverse().join("");

        msg.innerHTML = str;
    }




    // 3. 判断字符串是否是回文字符串
    //     - abcdedcba
    //     - abcddcba
    var btn3 = document.getElementById("btn3")
    btn3.onclick = function(){
        var str = txt1.value;
        msg.innerHTML = isH(str);
    }

    // 判断是否是回文字符串的功能
    function isH(str){
        // 思路1：翻转之后是否和原字符相同

        // 思路2：将第一个和最后一个最比较，依次类推，到中间值
        // 取出中间值
        var c = str.length%2 ? parseInt(str.length/2) : str.length/2;
        // 将中间值之前的部分和之后的部分，一一比较
        for(var i=0;i<c;i++){
            // 只要发现不相同，就返回false
            if(str[i] !== str[str.length-1-i]){
                return false;
            }
        }
        // 比较完成后，还没有返回值false，说明全部相同，返回true
        return true;
    }


    // 4. 根据指定字符串，判断每个字符出现的次数，将结果记录在对象中
    //     - 如：abbcdeee
    //     - 得到：{
    //         a:1,
    //         b:2,
    //         c:1,
    //         d:1,
    //         e:3
    //     }
    var btn4 = document.getElementById("btn4");
    btn4.onclick = function(){
        var str = txt1.value;
        // 准备记录每个字符出现的次数
        var obj = {};
        // 遍历每个字符
        for(var i=0;i<str.length;i++){
            // 将遍历出的单个字符，作为对象的属性，判断是否存在
            if(obj[ str[i] ]){
                // 如果对象存在对应的属性，表示不是第一次遇到，给对象的这个属性的值+1
                obj[ str[i] ]++;
            }else{
                // 如果对象不存在对应的属性，表示第一次遇到这个字符，给对象添加这个属性，并设置值为1
                obj[ str[i] ] = 1;
            }
        }
        console.log(obj);
    }


    // 5. 检测字符串是否为为空，有提示
    var btn5 = document.getElementById("btn5");
    btn5.onclick = function(){
        var str = txt1.value;
        var tip = "";

        if(str){
            tip = "不为空"
        }else{
            tip = "空"
        }

        msg.innerHTML = tip;
    }

    // 6. 检测字符串是否以数字开头
    var btn6 = document.getElementById("btn6");
    btn6.onclick = function(){
        var str = txt1.value;
        var tip = "";
        // 根据转数值及NaN的规则判断
        if( !isNaN(str[0]) && str[0] !== " " ){
            tip = "是数字开头";
        }else{
            tip = "不是数字开头";
        }

        msg.innerHTML = tip;
    }


    // 7. 检测字符串长度是否在6~20之间
    var btn7 = document.getElementById("btn7");
    btn7.onclick = function(){
        var str = txt1.value;
        var tip = "";
        if( str.length > 6 && str.length < 20 ){
            tip = "长度符合";
        }else{
            tip = "长度不符合";
        }

        msg.innerHTML = tip;
    }

</script>
</html>